.imgList {
	text-align: center;
    ul {
        li {
            width: 317px;
            height: 300px;
            border: 1px solid gray;
            margin-right: 10px;
            margin-bottom: 10px;
            float: left;
            img{
            	width: 100%;
            	height:100%;
            }
        }
        li:nth-child(3n){
        	margin-right: 0;
        }
    }
    div{
    	button{
    		padding: 3px 5px;
    		border-radius: 3px;
    	}
    	input{
    		width: 32px;
    	}
    }
}
.showImg{
	width: 1200px;
	position: absolute;
	padding: 20px;
	background-color: rgba(0,0,0,0.5);
	top: 0px;
	left: 0px;
	text-align: center;
	span{
		position: absolute;
		top: 2px;
		right: 2px;
		display: inline-block;
		width: 18px;
		height: 18px;
		padding: 1px;
		border:1px solid lightgray;
		color:blue;
		border-radius: 50%;
		&:hover{
			color:red;
			cursor: pointer;
		}
	}
	li{
		width: 370px;
		height: 350px;
		border:1px solid gray;
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
		img{
			width: 100%;
			height: 100%;
		}
	}
	li:nth-child(3n){
		margin-right: 0px;
	}
	div{
    	button{
    		padding: 3px 5px;
    		border-radius: 3px;
    	}
    	input{
    		width: 32px;
    		font-size: 24px;
    	}
    }
    .detailImg{
    	width: 800px;
    	height: 600px;
    	position: absolute;
    	left: 50%;
    	top: 20px;
    	padding: 10px;
    	background-color: rgba(0,0,0,0.4);
    	transform:translateX(-50%);
    	span{
    		display: inline-block;
    		width: 18px;
    		height: 18px;
    		color: red;
    		position: absolute;
    		top: 2px;
    		right: 2px;
    	}
    	img{
    		width: 100%;
    		height: 100%;
    	}
    }
}